<template>
  <div class="tenant-info">
    <el-descriptions title="基本信息" :column="2" :labelStyle="{ color: '#999' }" :contentStyle="{ color: '#333' }">
      <el-descriptions-item label="企业名称">{{ currentRow.name }}</el-descriptions-item>
      <el-descriptions-item label="企业注册地址">{{ currentRow.address }}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{
        currentRow.enterpriseOperator ? currentRow.enterpriseOperator.name : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        currentRow.enterpriseOperator ? currentRow.enterpriseOperator.mobile : ''
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="协议详情" :column="2" :labelStyle="{ color: '#999' }" :contentStyle="{ color: '#333' }">
      <template slot="extra">
        <el-button type="text" size="small" v-if="currentRow.flowIds" @click="toContractInfo(currentRow.flowIds)"
          >查看详细合同</el-button
        >
      </template>
      <el-descriptions-item label="状态"
        ><el-tag size="small">{{ currentRow.latestFlowStatus | statusFilter }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="签署截止日期">{{ currentRow.contractEndDate | dateFilter }}</el-descriptions-item>
      <el-descriptions-item label="经办人">{{
        currentRow.enterpriseOperator ? currentRow.enterpriseOperator.name : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="经办人电话">{{
        currentRow.enterpriseOperator ? currentRow.enterpriseOperator.mobile : ''
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="人员派遣详情" direction="vertical" :column="4" border></el-descriptions>
    <el-table :data="sendRecord" border style="width: 100%">
      <el-table-column prop="name" label="工人姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.workerName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="派遣起始日期" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime | timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="派遣截止日期" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime | timeFilter }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="status"
        label="状态"
        width="120">
        <template slot-scope="scope">
          <span>{{ handleStatus(scope.row.status, scope.row.endTime) | workerStatusFilter }}</span>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import moment from 'moment';
import { formatTime } from '@common/utils/time';
import { TENANT_STATUS } from '@common/consts/status';

export default {
  name: 'tenantDetail',
  props: {
    currentRow: {
      type: Object,
      default() {
        return {};
      },
    },
    sendRecord: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  filters: {
    dateFilter(time) {
      if (String(time).length === 13) {
        return moment(time).format('YYYY-MM-DD');
      }
      if (String(time).length === 10) {
        return moment(time * 1000).format('YYYY-MM-DD');
      }
      return '';
    },
    timeFilter(time, format) {
      if (time) return formatTime(time, { format: format || 'YYYY-MM-DD' });
      return '--';
    },
    statusFilter(status) {
      return status ? TENANT_STATUS[status] : '';
    },
    workerStatusFilter(status) {
      const statusMap = {
        FINISH: '已结束',
        SEND: '已派遣',
      };
      return status ? statusMap[status] : '';
    },
  },
  created() {},
  methods: {
    // 处理人员派遣详情状态
    handleStatus(status, endTime) {
      const today = Date.now();
      const dealline = moment(endTime).format('x');
      // console.log('dealline====', endTime, dealline, today);
      // 如果截止日期已到，状态显示已结束
      if (today > dealline) {
        return 'FINISH';
      }
      return status;
    },

    // 合同详情
    toContractInfo(flowId) {
      this.$router.push({
        path: '/tenant/detail',
        query: { flowId, fromPath: '/tenant/init' },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tenant-info {
  .el-descriptions + .el-descriptions {
    margin-top: 20px;
  }
}
</style>
